<!DOCTYPE html>
<html>
	<head>
		<title>消息列表</title>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=no"/>
	  <script src="js/flexible.js"></script>
	  <!-- 引入样式 -->
	  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
	  <link rel="stylesheet" type="text/css" href="css/style.css"/>
	  <link rel="stylesheet prefetch" href="photoSwipe4.1.1/css/photoswipe.css">
	  <link rel="stylesheet" type="text/css" href="photoSwipe4.1.1/css/default-skin/default-skin.css"/>
	</head>
	<body>
	  <div id="message">
		    <ul
		    	class="messageUl"
		    	v-infinite-scroll="loadMore"
				  infinite-scroll-disabled="scrollLoading"
				  infinite-scroll-distance="1"
				  >
				  <li v-for="(item,i) in list" :id="item.id" @click="toDetail(item.id)">
				  	<div class="mesHeadBg">
					  	<div class="mesHead">
					  		<div class="headPortrait">
					  			<img onload="imgClass(event)" :src="item.headimg?imgUrl+item.headimg:'image/icon_head_normal.png'"/>  <!--onload="imgClass(event)"-->
					  		</div>
					  		<span v-text="item.workerNickname"></span>
					  		<div class="time">
					  			<span v-text="item.createTime"></span>
					  		</div>
					  	</div>
					  	<div class="line"></div>
				  	</div>
				  	
				  	<div class="mesCont">
				  		<p class="mesTitle" v-text="item.content"></p>
							<!--<div class="imgsBg" :class="{imgLen1:item.urlImg.length==1,imgLens:item.urlImg.length>1}">-->
							<div class="imgsBg imgLens">
								<div class="my-gallery" data-pswp-uid="1">
							  	<figure v-for="subItem in item.urlImg">
							  		<div>
							  			<a :href="imgUrl+subItem" data-size="600x300">
							  				<img onload="imgClass(event)" :src="imgUrl+subItem">
							  			</a>
							  		</div>
							  	</figure>
							</div>
					  		<p>
					  			<span v-text="item.numReply"></span>条回复
					  		</p>
				  		</div>
				  	</div>
				  </li>
				</ul>
			<div class="loding" v-cloak>
				<mt-spinner style="margin: 0px auto;display: block;width: 30px;" v-show="loading" color="#666" :size="20"></mt-spinner>
				<p v-show="last" style="text-align: center; color:#666">没数据了</p>
				<!--<div v-show="last" style="width: 80px;height: 80px;margin: 0 auto;padding-top:160px">
					<img src="zgbHtml.image/nomessge.png" style="width:72p;height: 64px;">
					<p style="color:#c4c6cc;font-size:12px;text-align: center">暂无数据</p>
				</div>-->
	  	</div>
		</div>
		
	  <!--------------------------------------------图片放大插件--------------------------------------------------->
		<!-- Root element of PhotoSwipe. Must have class pswp. -->
		<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
		
		    <!-- Background of PhotoSwipe.
		         It's a separate element as animating opacity is faster than rgba(). -->
		    <div class="pswp__bg"></div>
		
		    <!-- Slides wrapper with overflow:hidden. -->
		    <div class="pswp__scroll-wrap">
		
		        <!-- Container that holds slides.
		            PhotoSwipe keeps only 3 of them in the DOM to save memory.
		            Don't modify these 3 pswp__item elements, data is added later on. -->
		        <div class="pswp__container">
		            <div class="pswp__item"></div>
		            <div class="pswp__item"></div>
		            <div class="pswp__item"></div>
		        </div>
		
		        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
		        <div class="pswp__ui pswp__ui--hidden">
		
		            <div class="pswp__top-bar">
		
		                <!--  Controls are self-explanatory. Order can be changed. -->
		
		                <div class="pswp__counter"></div>
		
		                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
		
		                <!--<button class="pswp__button pswp__button--share" title="Share"></button>-->
		
		                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
		
		                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
		
		                <!-- element will get class pswp__preloader--active when preloader is running -->
		                <div class="pswp__preloader">
		                    <div class="pswp__preloader__icn">
		                      <div class="pswp__preloader__cut">
		                        <div class="pswp__preloader__donut"></div>
		                      </div>
		                    </div>
		                </div>
		            </div>
		
		            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
		                <div class="pswp__share-tooltip"></div> 
		            </div>
		
		            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
		            </button>
		
		            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
		            </button>
		
		            <div class="pswp__caption">
		                <div class="pswp__caption__center"></div>
		            </div>
		
		        </div>
		
		    </div>
		
		</div>

	  <script src="js/jquery-1.11.3.min.js"></script>
	  <script src="js/vue.min.js"></script>
	  <script src="js/all.js" type="text/javascript" charset="utf-8"></script>
	  <script src="js/axios.min.js"></script>
	  <script src="js//index.js"></script>
	  <script src="js/message.js" type="text/javascript" charset="utf-8"></script>
	  <script src="photoSwipe4.1.1/js/photoswipe.js" type="text/javascript" charset="utf-8"></script>
	  <script src="photoSwipe4.1.1/js/photoswipe-ui-default.min.js" type="text/javascript" charset="utf-8"></script>
	
	  <script>
			var vm = new Vue({
	      el: '#message',
	      data:{
	      	group:{
	      		//groupId:0,
                //cid:0,
                groupId:348,
                cid:11,
	      		lastId:0

	      	},
	      	list:[],
	      	//上拉加载
				  loading:false,
				  scrollLoading:false,
				  last:true
				},
//				alert(您好！);
	      methods: {
	        loadMore: function() {

        		var lastData = this.list[this.list.length-1];
        		if (lastData) {
        			this.group.lastId = lastData.id;
        		}
    				this.query(true);
					},
					query:function(loadMore){
						this.scrollLoading = true;
	    				this.loading = true;
						var that = this;
						var n = 0;
						this.group.cid = GetQueryString("cid")
						this.group.groupId = GetQueryString("groupId")
						axios.post(url+"/migrant/getMigGroupMessage",this.group,{
                           headers:{"token":GetQueryString("token")}
                          //  headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6IlR1ZSBBdWcgMTUgMTc6MTQ6MzAgQ1NUIDIwMTcifQ.S6k4iRxnqEKtoWT4DiSYEVchOAFy1VaivQM2nXoaORsuserId:679"}
						}).then(function(data){
							console.log(data)
							var dataArr = data.data.data;
							for (var i=0;i<dataArr.length;i++) {
								var unixTimestamp = new Date(dataArr[i].createTime);
		        		dataArr[i].createTime = unixTimestamp.toLocaleString();
								if (dataArr[i].urlImg) {
									dataArr[i].urlImg = dataArr[i].urlImg.split(',')
								}
							}
							this.list.push.apply(this.list,dataArr);
							Vue.nextTick(function(){
//							    alert("你好");
	      				initPhotoSwipeFromDOM('.my-gallery');
	      			});
					this.loading = false;
	      			this.scrollLoading = false;

							if(dataArr.length==0){
								this.scrollLoading = true;
								this.last = true;
	      			}		/*if(this.list.length!==0){
								this.last = true;
							}*/
						}.bind(this))
					},
					toDetail:function(id){

//						console.log(this.group.cid)
						window.location.href='messageDetails.html?id='+id+'&cid='+this.group.cid
					}
	      },
	      mounted:function(){
//			DOM加载后触发执行
//			  alert("您好");
			  	this.$nextTick(function(){   // 文档加载后调用
			  		this.query()

					});
			  }
	    })
	    
			var initPhotoSwipeFromDOM = function(gallerySelector) {
		
		    // 解析来自DOM元素幻灯片数据（URL，标题，大小...）
		    // (children of gallerySelector)
		    var parseThumbnailElements = function(el) {
		        var thumbElements = el.childNodes,
		            numNodes = thumbElements.length,
		            items = [],
		            figureEl,
		            linkEl,
		            size,
		            item,
					divEl;
		
		        for(var i = 0; i < numNodes; i++) {
		
		            figureEl = thumbElements[i]; // <figure> element
		
		            // 仅包括元素节点
		            if(figureEl.nodeType !== 1) {
		                continue;
		            }
					divEl = figureEl.children[0];
		            linkEl = divEl.children[0]; // <a> element
					
		            size = linkEl.getAttribute('data-size').split('x');
		
		            // 创建幻灯片对象
		            item = {
		                src: linkEl.getAttribute('href'),
		                w: parseInt(size[0], 10),
		                h: parseInt(size[1], 10)
		            };
		
		
		
		            if(figureEl.children.length > 1) {
		                // <figcaption> content
		                item.title = figureEl.children[1].innerHTML; 
		            }
		
		            if(linkEl.children.length > 0) {
		                // <img> 缩略图节点, 检索缩略图网址
		                item.msrc = linkEl.children[0].getAttribute('src');
		            } 
		
		            item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
		            items.push(item);
		        }
		
		        return items;
		    };
		
		    // 查找最近的父节点
		    var closest = function closest(el, fn) {
		        return el && ( fn(el) ? el : closest(el.parentNode, fn) );
		    };
		
		    // 当用户点击缩略图触发
		    var onThumbnailsClick = function(e) {
		    		e.stopPropagation(); 
		        e = e || window.event;
		        e.preventDefault ? e.preventDefault() : e.returnValue = false;
		
		        var eTarget = e.target || e.srcElement;
		
		        // find root element of slide
		        var clickedListItem = closest(eTarget, function(el) {
		            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
		        });
		
		        if(!clickedListItem) {
		            return;
		        }
		
		        // find index of clicked item by looping through all child nodes
		        // alternatively, you may define index via data- attribute
		        var clickedGallery = clickedListItem.parentNode,
		            childNodes = clickedListItem.parentNode.childNodes,
		            numChildNodes = childNodes.length,
		            nodeIndex = 0,
		            index;
		
		        for (var i = 0; i < numChildNodes; i++) {
		            if(childNodes[i].nodeType !== 1) { 
		                continue; 
		            }
		
		            if(childNodes[i] === clickedListItem) {
		                index = nodeIndex;
		                break;
		            }
		            nodeIndex++;
		        }
		
		
		
		        if(index >= 0) {
		            // open PhotoSwipe if valid index found
		            openPhotoSwipe( index, clickedGallery );
		        }
		        return false;
		    };
		
		    // parse picture index and gallery index from URL (#&pid=1&gid=2)
		    var photoswipeParseHash = function() {
		        var hash = window.location.hash.substring(1),
		        params = {};
		
		        if(hash.length < 5) {
		            return params;
		        }
		
		        var vars = hash.split('&');
		        for (var i = 0; i < vars.length; i++) {
		            if(!vars[i]) {
		                continue;
		            }
		            var pair = vars[i].split('=');  
		            if(pair.length < 2) {
		                continue;
		            }           
		            params[pair[0]] = pair[1];
		        }
		
		        if(params.gid) {
		            params.gid = parseInt(params.gid, 10);
		        }
		
		        return params;
		    };
		
		    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
		        var pswpElement = document.querySelectorAll('.pswp')[0],
		            gallery,
		            options,
		            items;
		
		        items = parseThumbnailElements(galleryElement);
		
		        // 这里可以定义参数
		        options = {
		          barsSize: { 
		            top: 100,
		            bottom: 100
		          }, 
				   fullscreenEl : false,
					shareButtons: [
					{id:'wechat', label:'分享微信', url:'#'},
					{id:'weibo', label:'新浪微博', url:'#'},
					{id:'download', label:'保存图片', url:'{{raw_image_url}}', download:true}
					],
		
		            // define gallery index (for URL)
		            galleryUID: galleryElement.getAttribute('data-pswp-uid'),
		
		            getThumbBoundsFn: function(index) {
		                // See Options -> getThumbBoundsFn section of documentation for more info
		                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
		                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
		                    rect = thumbnail.getBoundingClientRect(); 
		
		                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
		            }
		
		        };
		
		        // PhotoSwipe opened from URL
		        if(fromURL) {
		            if(options.galleryPIDs) {
		                // parse real index when custom PIDs are used 
		                for(var j = 0; j < items.length; j++) {
		                    if(items[j].pid == index) {
		                        options.index = j;
		                        break;
		                    }
		                }
		            } else {
		                // in URL indexes start from 1
		                options.index = parseInt(index, 10) - 1;
		            }
		        } else {
		            options.index = parseInt(index, 10);
		        }
		
		        // exit if index not found
		        if( isNaN(options.index) ) {
		            return;
		        }
		
		        if(disableAnimation) {
		            options.showAnimationDuration = 0;
		        }
		
		        // Pass data to PhotoSwipe and initialize it
		        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
		        gallery.init();

		    };
		
		    // loop through all gallery elements and bind events
		    var galleryElements = document.querySelectorAll( gallerySelector );
		
		    for(var i = 0, l = galleryElements.length; i < l; i++) {
		        galleryElements[i].setAttribute('data-pswp-uid', i+1);
		        galleryElements[i].onclick = onThumbnailsClick
		    }
		
		    // Parse URL and open gallery if it contains #&pid=3&gid=1
		    var hashData = photoswipeParseHash();
		    if(hashData.pid && hashData.gid) {
		        openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
		    }
			};
		</script>
	</body>
</html>